<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="批量修改供应商采购天数"
    width="860px"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <el-form :model="formValues" label-position="top" ref="formRef">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="供应商装箱量">
            <el-input-number
              v-model="formValues.supplier_packing_quantity"
              placeholder="请输入"
              :controls="false"
              :min="1"
              class="w-[100%]"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="MPQ最小包装量">
            <el-input-number
              v-model="formValues.mpq_min_quantity"
              placeholder="请输入"
              :controls="false"
              :min="1"
              class="w-[100%]"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="起批量">
            <el-input
              v-model="formValues.min_order_quantity"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="扣减天数">
            <el-input
              v-model="formValues.abatement_day"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否备料">
            <el-select
              class="w-full"
              v-model="formValues.is_stock_prepare"
              placeholder="请选择"
              @change="changeStockPrepare"
            >
              <el-option
                v-for="item in options['goods.GoodsSkuSupplier']?.[0].isStockPrepareText"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="1688商品链接">
            <el-input v-model="formValues.purchase_link" placeholder="请输入">
              <template #prepend>http://</template>
              <!-- <template #append>
                <el-button style="background-color: #3487FF;color: #ffffff;" type="primary"><a
                    :href="formValues.purchase_link" target="_Blank">跳转</a></el-button>
              </template> -->
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="采购天数" prop="purchase_days">
            <template #label>
              <div class="flex justify-start">
                <div class="w-[155px] font-bold">采购天数</div>
                <div class="w-[185px] font-bold">生产天数</div>
                <div class="w-[185px] font-bold">采购运输天数</div>
                <div class="w-[180px] font-bold">入库天数</div>
              </div>
            </template>
            <div class="flex justify-start">
              <el-input
                style="width: 120px"
                v-model.trim="formValues.purchase_days"
                disabled
              />
              <span class="mx-3"> = </span>
              <el-input-number
                v-model="formValues.production_days"
                :min="0"
                :max="999"
                @blur="countDay"
                controls-position="right"
                placeholder="生产天数"
                style="width: 150px"
              />
              <span class="mx-3"> + </span>
              <el-input-number
                v-model="formValues.purchase_transportation_days"
                :min="0"
                :max="999"
                @blur="countDay"
                controls-position="right"
                placeholder="采购运输天数"
                style="width: 150px"
              />
              <span class="mx-3"> + </span>
              <el-input-number
                v-model="formValues.inventory_days"
                :min="0"
                :max="999"
                @blur="countDay"
                controls-position="right"
                placeholder="入库天数"
                style="width: 150px"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="formValues.is_stock_prepare == 1">
        <el-col :span="24">
          <el-form-item label="备料后采购天数">
            <template #label>
              <div class="flex justify-start">
                <div class="w-[155px] font-bold">备料后采购天数</div>
                <div class="w-[185px] font-bold">备料后生产天数</div>
                <div class="w-[185px] font-bold">备料后采购运输天数</div>
                <div class="w-[180px] font-bold">备料后入库天数</div>
              </div>
            </template>
            <div class="flex justify-start">
              <el-input
                style="width: 120px"
                v-model.trim="formValues.prepare_purchase_day"
                disabled
              />
              <span class="mx-3"> = </span>
              <el-input-number
                v-model="formValues.prepare_product_day"
                :min="0"
                :max="999"
                @blur="countStockDay"
                controls-position="right"
                placeholder="备料后生产天数"
                style="width: 150px"
              />
              <span class="mx-3"> + </span>
              <el-input-number
                v-model="formValues.prepare_shipping_day"
                :min="0"
                :max="999"
                @blur="countStockDay"
                controls-position="right"
                placeholder="备料后采购运输天数"
                style="width: 150px"
              />
              <span class="mx-3"> + </span>
              <el-input-number
                v-model="formValues.prepare_arrived_day"
                :min="0"
                :max="999"
                @blur="countStockDay"
                controls-position="right"
                placeholder="备料后入库天数"
                style="width: 150px"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-checkbox
          v-model="is_all"
          :true-label="1"
          :false-label="2"
          label="修改所有绑定供应商"
          size="large"
        />
      </div>
      <div class="text-[#999] text-xs">
        <p class="leading-5">注：</p>
        <p class="leading-5">
          1、以上内容默认只修改“默认供应商”的报关数据，只有勾选“修改所有绑定供应商”才会修改该SKU绑定的所有供应商的采购信息
        </p>
        <p class="leading-5">2、备料后采购天数，只有是否备料=是，才支持维护</p>
      </div>
    </el-form>

    <template #footer>
      <div class="footer-btn">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { batchUpdatePurchase } from "../api.js";
import { onMounted, reactive, toRefs } from "vue";

const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
});
const { options } = toRefs(props);

const visible = ref(false);
const loading = ref(false);
const formValues = ref({});
const is_all = ref(2);
const formRef = ref();
const sku_ids = ref({});
const emit = defineEmits(["refresh"]);
const load = ref(false);
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  sku_ids.value = data;
  visible.value = true;
};

const save = async () => {
  const valid = await formRef.value.validate();
  if (!valid) return;

  if (
    formValues.value.is_stock_prepare == 1 &&
    (Number(formValues.value.prepare_purchase_day) == 0 ||
      !formValues.value.prepare_purchase_day)
  ) {
    return ElMessage.error("是否备料为是，则备料后采购天数不能为0");
  }
  const data = Object.assign({}, formValues.value);
  if (data.is_stock_prepare === 0) {
    data.prepare_purchase_day = 0;
    data.prepare_product_day = 0;
    data.prepare_shipping_day = 0;
    data.prepare_arrived_day = 0;
  }
  loading.value = true;

  try {
    const res = await batchUpdatePurchase({
      data,
      sku_ids: sku_ids.value,
      is_all: is_all.value,
    });
    if (res.code === 200) {
      ElMessage.success("操作成功");
      close(true);
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

const close = async (refresh) => {
  sku_ids.value = [];
  formValues.value = {};
  is_all.value = 2;
  await nextTick();
  await formRef.value.resetFields();
  if (refresh) emit("refresh");
  visible.value = false;
};
defineExpose({ open });

// 计算采购天数
const countDay = () => {
  const {
    production_days,
    purchase_transportation_days,
    inventory_days,
  } = formValues.value;
  formValues.value.purchase_days =
    (production_days ? production_days : 0) +
    (purchase_transportation_days ? purchase_transportation_days : 0) +
    (inventory_days ? inventory_days : 0);
};

// 计算备库天数
const countStockDay = () => {
  const {
    prepare_product_day,
    prepare_shipping_day,
    prepare_arrived_day,
  } = formValues.value;
  formValues.value.prepare_purchase_day =
    (prepare_product_day ? prepare_product_day : 0) +
    (prepare_shipping_day ? prepare_shipping_day : 0) +
    (prepare_arrived_day ? prepare_arrived_day : 0);
};

// 切换是否备料 清空采购各种天数
const changeStockPrepare = (val) => {
  if (!val) {
    formValues.value.prepare_purchase_day = "";
    formValues.value.prepare_product_day = "";
    formValues.value.prepare_shipping_day = "";
    formValues.value.prepare_arrived_day = "";
  }
};
</script>

<style lang="scss" scoped>
.footer-btn {
  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }
}
</style>
